<template>
    <div class="block-padding">
       <ul class="th-songlist">
         <li v-if="song_list && song_list.length" v-for="song in song_list" v-bind:key="song.all_artist_id">
           <router-link :to="{name:'musicPlay',params:{songId:song.song_id}}">
              <div class="poster">
                <img :src="song.pic_big" alt="">
                <i></i>
              </div>
              <div class="info">
                 <div class="line1">
                    <span class="name">{{song.title}}</span>
                    <p class="author">{{song.artist_name}}</p>
                 </div>
              </div>
           </router-link>
         </li>
       </ul>
      <a href="javascript:;" class="more-text">
        查看该榜单 >
      </a>
    </div>
</template>

<script>
    export default {
       props:{
          url:{
             type:String,
             default:''
          }
       },
      data(){
         return{
           song_list:[]
         }
      },
       methods:{
         getList(){
            const HttpUrl = this.host + this.url;
            this.$axios.get(HttpUrl).then(res=>{
               const {song_list} = res.data;
               this.song_list = song_list;

            }).catch(err=>{
              console.log(err)
            })
         }
       },
       mounted(){
          this.getList()
       }
    }
</script>

<style scoped lang="less">
  .block-padding{
    background-color: #fff;
    margin-bottom: 10px;
    .th-songlist{
      padding: 0px 17px;
      background: #fff;
      li{
        padding: 7px 0;
        border-bottom: 1px solid #f2f2f2;
        min-height: 55px;
        a{
          display: flex;
          align-items: center;
          .poster{
            position: relative;
            width: 45px;
            margin-right: 8px;
            justify-content: center;
            img{
              width: 45px;
            }
          }
          .info{
            flex: 1 1 0%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1;

            .line1 {
              display: flex;
              flex-direction: column;

              min-height: 22px;
              .name{
                font-size: 16px;
                color: #333;
                line-height: 22px;
              }
              .author{
                font-size: 12px;
                color: #999;
                line-height: 16px;
              }

            }
          }

        }

      }
    }
    .more-text{
      color: #999;
      display: block;
      margin-top: 9px;
      font-size: 12px;
      text-align: center;
      height: 32px;
      line-height: 32px
    }
  }

</style>
